<template>
  <div
    id="goodDetail-title"
    class="productList productList2"
    ref="container"
    :height="height"
    v-wechat-title="this.pageTitle"
  >
    <!-- <form @submit.prevent="submitForm">
      <div class="search bg-color-red acea-row row-between-wrapper">
        <div class="input acea-row row-between-wrapper">
          <span class="iconfont icon-sousuo"></span>
          <input placeholder="搜索商品信息" v-model="where.keyword" />
        </div>
        <div
          class="iconfont"
          :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'"
          @click="switchTap"
        ></div>
      </div>
    </form>-->
    <!-- <div class="nav acea-row row-middle">
      <div
        class="item"
        :class="title ? 'font-color-red' : ''"
        @click="set_where(0)"
      >
        {{ title ? title : "默认" }}
      </div>
      <div class="item" @click="set_where(1)">
        价格
        <img src="@assets/images/horn.png" v-if="price === 0" />
        <img src="@assets/images/up.png" v-if="price === 1" />
        <img src="@assets/images/down.png" v-if="price === 2" />
      </div>
      <div class="item" @click="set_where(2)">
        销量
        <img src="@assets/images/horn.png" v-if="stock === 0" />
        <img src="@assets/images/up.png" v-if="stock === 1" />
        <img src="@assets/images/down.png" v-if="stock === 2" />
      </div>
      
      <div
        class="item"
        :class="nows ? 'font-color-red' : ''"
        @click="set_where(3)"
      >
        新品
      </div>
    </div>-->
    <div class="erjiTab">
      <swiper class="swiper-wrapper" :options="ProductConSwiper1">
        <swiper-slide
          class="swiper-slide"
          v-for="(item, index) in tabList"
          :key="index"
          ref="goodSwiper"
        >
          <div class="oneTabs" @click="changetabType(item.cate_id)">
            <p :class="{ active: item.ischecked }">{{ item.cate_name }}</p>
            <span v-show="item.ischecked"></span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="fatherDiv" style="margin-top:1rem;width:100%;height:auto;overflow::hidden;">
      <!-- 视频播放器 -->
      <scroller :on-infinite="infinite" :on-refresh="refresh" style="top:1rem;" ref="my_scroller">
        <div class="all" v-if="productList.length !== 0 && is_host == '0'" style="display:none;">
          <!-- <div class="video  swiper-no-swiping">
            <div
              class="swiper-wrapper"
              style="z-index:3;border-radius: 0.12rem;overflow:hidden;"
              v-show="bannerType == '2' && broadcasts == '0'"
            >
              
              <video
                class="id_test_video"
                src="http://1258023332.vod2.myqcloud.com/14630f7fvodcq1258023332/5224e4045285890798976944326/Wgu6Hf3mE1QA.mp4"
              ></video>
            </div>
            <div
              v-show="broadcasts == '1' && bannerType != '1'"
              class="cengs"
              style="width:100%;position:absolute;top:0;left:0;z-index:2;background-size: 100%;overflow:hidden;"
            >
              <img
                src="http://img001.cbct.cn/image/kgljm3mhm34848o00w.jpg"
                v-show="bannerType == '2' || bannerType == '3'"
                @click="broadcast()"
                alt=""
                style="float:left;z-index: 20;margin:1.73rem 0 0 2.97rem; width:0.76rem;"
              />
          </div>-->
          <!-- <div class="swiper-container" id="bannerImage">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide box"
                  v-for="(item, index) in rollList"
                  :key="index"
                >
                  <img
                    @click="window.location.href = item.link"
                    :src="item.img"
                    alt=""
                    style="float:left;width:100%;height:100%;"
                  />
                </div>
              </div>
          </div>-->
          <div class="slider-banner product-bg">
            <swiper class="swiper-wrapper" :options="ProductConSwiper">
              <swiper-slide
                class="swiper-slide"
                v-for="(item, index) in rollList"
                :key="index"
                ref="goodSwiper"
              >
                <div
                  class="slide-image"
                  @click="hrefs(item.link)"
                  :style="{
                    background: 'url(' + item.img + ') no-repeat center center',
                    'background-size': '100% 100%',
                    cursor: 'pointer'
                  }"
                ></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- <div class="title" v-if="productList.length !== 0">
          <img src="@assets/images/right_title.png" alt="" />
          <span>热门商品</span>
          <img src="@assets/images/left_title.png" alt="" />
        </div>-->
        <!-- <newGoodsList :type="1" v-if="productList.length !== 0"></newGoodsList> -->

        <div class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
          <div
            @click="goDetail(item)"
            v-for="(item, index) in productList"
            :key="index"
            class="item"
            :class="cantClick === true ? 'cantClick' : ''"
            :title="item.store_name"
          >
            <div class="pictrue" :class="Switch === true ? '' : 'on'">
              <img
                v-if="item.is_seckill == '0'"
                :src="item.image"
                :class="Switch === true ? '' : 'on'"
              >
              <img
                v-if="item.is_seckill == '1'"
                :src="item.seckill.image"
                :class="Switch === true ? '' : 'on'"
              >
              <span
                class="pictrue_log_class"
                :class="Switch === true ? 'pictrue_log_big' : 'pictrue_log'"
                v-if="item.activity && item.activity.type === '1'"
              >秒杀</span>
              <span
                class="pictrue_log_class"
                :class="Switch === true ? 'pictrue_log_big' : 'pictrue_log'"
                v-if="item.activity && item.activity.type === '2'"
              >砍价</span>
              <span
                class="pictrue_log_class"
                :class="Switch === true ? 'pictrue_log_big' : 'pictrue_log'"
                v-if="item.activity && item.activity.type === '3'"
              >拼团</span>
              <span style="width:1.48rem;" v-show="item.is_seckill == '1'" class="free_buy">
                <img style="border-radius:0;" src="@assets/images/seckill.png" alt>
              </span>
              <span v-show="item.is_free == '1'" class="free_buy">
                <img style="border-radius:0;" src="@assets/images/freeBay.png" alt>
              </span>
            </div>
            <div class="text" :class="Switch === true ? '' : 'on'">
              <div v-if="item.is_seckill == '1'" class="name line1" style="height:0.72rem;">
                <!-- <span  style="padding: 0.02rem 0.06rem;border-radius: 0.04rem;margin-right: 0.08rem;height: auto;border: 0.02rem solid rgba(255,35,35,0.38);font-size: 0.24rem;font-weight: 400;color: rgba(255,35,35,0.78);line-height: 1;">{{item.seckill.countTime}}</span> -->
                {{ item.seckill.title }}
              </div>
              <div
                v-if="item.is_seckill == '0'"
                class="name line1"
                style="height:0.72rem;"
              >{{ item.store_name }}</div>
              <!-- <div
                class="money font-color-red"
                :class="Switch === true ? '' : 'on'"
              >
                ￥<span class="num">{{ item.price }}</span>
              </div>-->
              <div class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
                <!-- <div
                  v-if="item.is_seckill == '0' && item.is_free == '0' && item.is_limit_buy == '0'"
                  class="vip-money font-color-red"
                >
                  ￥<span style="font-size:0.3rem;">{{
                    item.price.split(".")[0]
                  }}</span
                  >.{{ item.price.split(".")[1] }}
                </div>-->

                <div
                  style="display:flex;align-items: flex-end;"
                  v-if="item.is_seckill == '1' || item.is_free == '1'"
                >
                  <div
                    v-if="item.is_free == '1'"
                    class="vip-money font-color-red"
                    style="font-size:0.25rem;"
                  >
                    ￥
                    <span style="font-size:0.30rem;">0</span>.00
                  </div>
                  <div
                    v-if="item.is_seckill == '1'"
                    class="vip-money font-color-red"
                    style="font-size:0.25rem;"
                  >
                    ￥
                    <span style="font-size:0.30rem;">
                      {{
                      item.seckill.price.split(".")[0]
                      }}
                    </span>
                    .{{ item.seckill.price.split(".")[1] }}
                  </div>
                  <div
                    v-if="item.is_seckill == '1' || item.is_free == '1'"
                    class
                    style="color:#ccc;font-size:0.28rem;text-decoration:line-through;"
                  >
                    ￥
                    <span>{{ item.price.split(".")[0] }}</span>
                    .{{ item.price.split(".")[1] }}
                  </div>
                </div>
                <div
                  style="display:flex;align-items: flex-end;"
                  v-if="item.is_seckill == '0' && item.is_free == '0'"
                >
                  <div class="vip-money font-color-red" style="font-size:0.25rem;">
                    ￥
                    <span style="font-size:0.30rem;">
                      {{
                      item.price.split(".")[0]
                      }}
                    </span>
                    .{{ item.price.split(".")[1] }}
                  </div>
                  <div
                    v-if="item.ot_price > item.price"
                    style="color:#ccc;font-size:0.25rem;text-decoration:line-through;"
                  >
                    ￥
                    <span>{{ item.ot_price.split(".")[0] }}</span>
                    .{{ item.ot_price.split(".")[1] }}
                  </div>
                </div>

                <!-- <span class="num" >已售</span>
                <span class="num" >已售</span>-->
              </div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.sales == undefined &&
                    item.ficti == undefined &&
                    item.is_seckill == '0'
                "
              >已售0 {{ item.unit_name }}</div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.sales != undefined &&
                    item.ficti != undefined &&
                    item.is_seckill == '0'
                "
              >已售{{ item.sales + item.ficti }} {{ item.unit_name }}</div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.sales != undefined &&
                    item.ficti == undefined &&
                    item.is_seckill == '0'
                "
              >已售{{ item.sales }} {{ item.unit_name }}</div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.sales == undefined &&
                    item.ficti != undefined &&
                    item.is_seckill == '0'
                "
              >已售{{ item.ficti }} {{ item.unit_name }}</div>

              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.seckill.sales == undefined &&
                    item.ficti == undefined &&
                    item.is_seckill == '1'
                "
              >已售0 {{ item.seckill.unit_name }}</div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.seckill.sales != undefined &&
                    item.ficti != undefined &&
                    item.is_seckill == '1'
                "
              >
                已售{{ item.seckill.sales + item.ficti }}
                {{ item.seckill.unit_name }}
              </div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.seckill.sales != undefined &&
                    item.ficti == undefined &&
                    item.is_seckill == '1'
                "
              >已售{{ item.seckill.sales }} {{ item.seckill.unit_name }}</div>
              <div
                style="font-size:0.22rem; color:#ccc;"
                v-if="
                  item.seckill.sales == undefined &&
                    item.ficti != undefined &&
                    item.is_seckill == '1'
                "
              >已售{{ item.ficti }} {{ item.seckill.unit_name }}</div>
            </div>
          </div>
        </div>
      </scroller>
    </div>

    <!-- <Loading :loaded="loadend" :loading="loading" style="opacity:0;"></Loading> -->
    <!-- <div
      class="noCommodity"
      v-cloak
      style="background-color: #fff;"
      v-if="productList.length === 0 && where.page >= 1"
    >
      <div class="noPictrue">
        <img src="@assets/images/noGood.png" class="image" />
        <p class="txt">暂无商品,去看点别的吧</p>
      </div>
    </div>-->
    <div class="noCart" v-if="productList.length === 0 && where.page >= 1 && canSCroll == true">
      <div class="pictrue">
        <img src="@assets/images/noOrder.png">
      </div>
      <p class="txt">暂无商品,去看点别的吧</p>
    </div>
    <!-- 回到顶部 -->
    <div class="toTop" @click="returnTop" v-show="showToTop == '1'">
      <img src="@assets/images/toTop1.png" alt srcset>
    </div>
    <!-- <Loading :loaded="loadend" :loading="loading"></Loading> -->
    <!-- <Recommend v-if="productList.length === 0 && where.page > 1"></Recommend> -->
  </div>
</template>

<script>
// import Recommend from "@components/Recommend";
import { getProducts } from "@api/store";
import cookie from "@utils/store/cookie";
import { isWeixin } from "@utils/index";
import { first_list } from "@api/store";
// import { getProductsImg } from "@api/store";
import debounce from "lodash.debounce";
import Loading from "@components/Loading";
import newGoodsList from "@components/newGoodsList";
import { goShopDetail } from "@libs/order";
import { clearAuthStatus } from "@libs/wechat";
// import Swiper from "swiper";
import { connect } from "tls";
import dayjs from "dayjs";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import shareMsg from "../../assets/js/common/shareConfig.js";
import share from "../../assets/js/common/share.js";
import "@assets/css/swiper.min.css";
import { constants } from "fs";
import { setInterval, clearInterval, setTimeout } from "timers";
export default {
  name: "GoodsList",
  components: {
    // Recommend,
    Loading,
    newGoodsList,
    swiper,
    swiperSlide
  },
  props: {},
  data: function() {
    const { s = "", id = 0, title = "" } = this.$route.query;
    let that = this;
    return {
      is_host: "1",
      hostProduct: [],
      productList: [],
      Switch: true,
      where: {
        page: 1,
        cate_id: ""
      },
      title: title && id ? title : "",
      loadTitle: "",
      loading: false,
      loadend: false,
      price: 0,
      stock: 0,
      nows: false,
      bannerType: "1",
      broadcasts: "1",
      rollList: [],
      height: "",
      noDate: false, //重置数据判断
      canSCroll: false,
      ProductConSwiper: {
        autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },
        loop: true,
        effect: "fade",
        // speed: 400,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false // 这样，即使我们滑动之后， 定时器也不会被清除
      },
      ProductConSwiper1: {
        slidesPerView: "auto",
        // centeredSlides : true,
        // centeredSlidesBounds: true,
        autoplayDisableOnInteraction: false // 这样，即使我们滑动之后， 定时器也不会被清除
      },
      from1: "",
      pageTitle: "",
      setTitles: true,
      cantClick: false,
      countTimetimer: "",
      listLength: 0,
      tabList: [],
      showToTop: "0",
      timerToTop: "",
      isshowTui: ""
    };
  },
  // beforeRouteEnter (to, from, next){
  //     console.log(unescape(cookie.get('title')));
  // },
  watch: {
    // pageTitle() {

    // },
    $route(to) {
      if (to.name !== "GoodsList") return;
      const { s = "", id = 0, title = "" } = to.query;

      // if (s !== this.where.keyword || id !== this.where.sid) {
      //   this.where.keyword = s;
      //   this.loadend = false;
      //   this.loading = false;
      //   this.where.page = 1;
      //   this.where.sid = id;
      //   this.title = title && id ? title : "";
      //   this.nows = false;
      //   this.$set(this, "productList", []);
      //   this.price = 0;
      //   this.stock = 0;
      //   this.get_product_list();
      // }
    }
  },
  created() {
    this.height = document.body.clientHeight + "px";
  },
  mounted: function() {
    var that = this;
    if (this.$route.query.isshowTui) {
      this.isshowTui = this.$route.query.isshowTui;
    }
    if (this.$route.query.isToken) {
      this.$store.commit(
        "LOGIN",
        this.$route.query.isToken
        // dayjs(expires_time) - newTime
      );
      cookie.set("OID", this.$route.query.oId);
    }
    that.makeAinterval();
    cookie.set("mer_id", this.$route.params.id.replace(/(^\s*)|(\s*$)/g, ""));
    let isFromApp = this.$route.query.from1;
    if (isFromApp == undefined) {
      isFromApp = "h5";
    }
    cookie.set("from1", isFromApp);
    this.from1 = cookie.get("from1");
    console.log(this.from1);
    console.log(this.from1);
    if (this.from1 == "app") {
      // that.isNo();
      this.getParameter();
      this.get_first_list();
      this.get_product_list();
      window["onWebResponse"] = str => {
        that.onWebResponse(str);
      };
    }
    if (this.from1 == "wxapp") {
    }
    this.get_first_list();
    if (isWeixin()) {
    } else {
      if (cookie.get("from1") != "app") {
        window.location.href = 'http://share.cbct.cn/downloadPage'
      }
    }
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.get_product_list();
    });
  },
  methods: {
    makeAinterval: function() {
      this.timerToTop = setInterval(() => {
        // console.log(this.$refs.my_scroller.getPosition().top);
        if (this.$refs.my_scroller.getPosition().top > 1500) {
          this.showToTop = "1";
        } else {
          this.showToTop = "0";
        }
      }, 100);
    },
    // snappingHeight:function(){
    //   console.log(this.$refs.my_scroller.getPosition().top);
    // },
    // scrollHeight:function(){
    //   let pullRefreshScrollTop = this.$refs.my_scroller.scrollTop;
    //   console.log(pullRefreshScrollTop);
    //   if(pullRefreshScrollTop > 500){
    //     this.showToTop = '1';
    //   }
    // },
    //回到顶部
    returnTop: function() {
      this.$refs.my_scroller.scrollTo(0, 0);
      this.showToTop = "0";
    },
    get_first_list: function() {
      var that = this;
      let qs = { mer_id: that.$route.params.id };
      first_list(qs).then(res => {
        if (this.isshowTui != "1") {
          res.data.forEach((value, index) => {
            if (index == 0) {
              that.$set(value, "ischecked", true);
              that.where.cate_id = value.cate_id;
            } else {
              that.$set(value, "ischecked", false);
            }
          });
        } else {
          res.data.forEach((value, index) => {
            if (index == 1) {
              that.$set(value, "ischecked", true);
              that.where.cate_id = value.cate_id;
            } else {
              that.$set(value, "ischecked", false);
            }
          });
        }

        that.tabList = res.data;
        that.noDate = false;
        that.get_product_list();
      });
    },
    changetabType: function(id) {
      var that = this;
      that.tabList.forEach((value, index) => {
        if (value.cate_id == id) {
          that.$set(value, "ischecked", true);
          that.where.cate_id = value.cate_id;
        } else {
          that.$set(value, "ischecked", false);
        }
      });
      that.where.page = 1;
      that.canSCroll = false;
      that.productList = [];
      that.refresh();
      setTimeout(() => {
        that.canSCroll = false;
        that.get_product_list();
      }, 10);
    },
    clearOneCookie: function(cookieName) {
      var cookies = document.cookie.split(";"); //将所有cookie键值对通过分号分割为数组
      //循环遍历所有cookie键值对
      for (var i = 0; i < cookies.length; i++) {
        //有些cookie键值对前面会莫名其妙产生一个空格，将空格去掉
        if (cookies[i].indexOf(" ") == 0) {
          cookies[i] = cookies[i].substring(1);
        }
        //比较每个cookie的名称，找到要删除的那个cookie键值对
        if (cookies[i].indexOf(cookieName) == 0) {
          var exp = new Date(); //获取客户端本地当前系统时间
          exp.setTime(exp.getTime() - 60 * 1000); //将exp设置为客户端本地时间1分钟以前，将exp赋值给cookie作为过期时间后，就表示该cookie已经过期了, 那么浏览器就会将其立刻删除掉
          document.cookie = cookies[i] + ";expires=" + exp.toUTCString(); //设置要删除的cookie的过期时间，即在该cookie的键值对后面再添加一个expires键值对，并将上面的exp赋给expires作为值(注意expires的值必须为UTC或者GMT时间，不能用本地时间），那么浏览器就会将该cookie立刻删除掉
          //注意document.cookie的用法很巧妙，在对其进行赋值的时候是设置单个cookie的信息，但是获取document.cookie的值的时候是返回所有cookie的信息
          break; //要删除的cookie已经在客户端被删除掉，跳出循环
        }
      }
    },
    //声音禁掉
    isNo: function() {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      const win = window;
      var obj = {
        action: "onClickPlay",
        content: {}
      };
      if (isAndroid) {
        App.onAppResponse(JSON.stringify(obj));
      }
      if (isIOS) {
        win.webkit.messageHandlers.onAppResponse.postMessage(
          JSON.stringify(obj)
        );
      }
    },
    hrefs(url) {
      var a = url.indexOf("ds.");
      if (a == -1) {
        window.location.href = url;
      } else {
        this.$router.push({ path: url.split("cbct.cn")[1] });
      }
    },
    infinite(done) {
      var self = this;
      setTimeout(function() {
        var timer1 = setInterval(function() {
          // console.log(self.canSCroll);
          if (!self.canSCroll) {
          } else {
            if (self.noDate) {
              self.$refs.my_scroller.finishInfinite(2); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              setTimeout(() => {
                self.where.page++; //下拉一次页数+1
                self.get_product_list();
                done(); //进行下一次加载操作
              }, 500);
            }
            clearInterval(timer1);
          }
        }, 100);
      }, 200);
    },
    refresh() {
      console.log("进入条件");
      this.where.page = 1; //重置页数刷新每次页数都是第一页
      this.noDate = false; //重置数据判断
      this.cantClick = true;
      this.LastIsLive = "";
      this.LastId = "";
      setTimeout(
        function() {
          this.setTitles = false;
          this.get_product_list();
          this.$refs.my_scroller.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
        }.bind(this),
        700
      );
    },
    broadcast: function() {
      if (this.bannerType == "2") {
        this.broadcasts = "0";
        this.stops = "0";
        var video = document.querySelector("video");
        video.play();
      }
      if (this.bannerType == "3") {
        if (this.from1 == "app") {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
          var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          const win = window;
          var obj = {
            action: "toliveRoom",
            content: {
              number: this.live_id,
              isLive: "1"
            }
          };
          if (isAndroid) {
            App.onAppResponse(JSON.stringify(obj));
          }
          if (isIOS) {
            win.webkit.messageHandlers.onAppResponse.postMessage(
              JSON.stringify(obj)
            );
          }
        } else if (this.from1 == "wxapp") {
        } else {
          var src = this.cbct
            .https()
            .split("channels.")[1]
            .split(".")[0];
          if (src != "" && src != undefined) {
            if (src != "dev" && src != "test") {
              src = "";
            } else {
              src = src + ".";
            }
          }
          window.location.href =
            "http://share." +
            src +
            "cbct.cn/programRecorded?type=1&isLive=1&live_id=" +
            this.live_id;
          //
        }
      }
    },
    // 嵌入app获取支付状态
    onWebResponse: function(str) {
      var obj = JSON.parse(str);
      // alert(obj.action);
      var action = obj.action;
      var self = this;
      var content = obj.content;
      if (action == "setUserInfo") {
        let did = content.did;
        let isToken = content.ds_token;
        let expires_time = content.ds_expires_time;
        let isSalt = content.salt;
        if (isToken == "") {
          this.$store.commit(
            "LOGIN",
            isToken
            // dayjs(expires_time) - newTime
          );
        } else {
          // alert(isToken);
          let newTime = Math.round(new Date() / 1000);
          this.$store.commit(
            "LOGIN",
            isToken
            // dayjs(expires_time) - newTime
          );
        }
      }
    },
    //轮播图
    // hostloop: function() {
    //   var self = this;
    //   var numlength = self.rollList.length;
    //   if (numlength == 1) {
    //     var swiperad = new Swiper("#bannerImage", {
    //       autoplay: false
    //     });
    //   } else {
    //     var swiper = new Swiper("#bannerImage", {
    //       observer: true,
    //       autoplay: true,
    //       observeParents: true,
    //       loop: true,
    //       speed: 2000,
    //       prevButton: ".swiper-button-prev",
    //       nextButton: ".swiper-button-next"
    //     });
    //   }
    // },

    // 商品详情跳转
    goDetail(item) {
      goShopDetail(item).then(() => {
        this.$router.push({
          path: "/detail/" + item.id + "?mer_id=" + this.$route.params.id
        });
      });
    },
    updateTitle() {
      var that = this;
      if (that.pageTitle == "") {
        document.title = "听见的橱窗";
      } else {
        document.title = that.pageTitle;
      }
    },
    getParameter: function() {
      var self = this;
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      const win = window;
      var obj = {
        action: "getParameter",
        content: {
          method: "setUserInfo",
          Parameter: {}
        }
      };
      if (isAndroid) {
        App.onAppResponse(JSON.stringify(obj));
      }
      if (isIOS) {
        win.webkit.messageHandlers.onAppResponse.postMessage(
          JSON.stringify(obj)
        );
      }
    },
    getTitle: function() {
      var self = this;
      if (self.pageTitle == undefined) {
        self.pageTitle = "听见的橱窗";
      }
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      var obj = {
        action: "setTitle",
        content: {
          title: self.pageTitle
        }
      };
      if (isAndroid) {
        App.onAppResponse(JSON.stringify(obj));
      }
    },
    get_product_list: debounce(function() {
      var that = this;
      if (that.where.cate_id == "") return;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      // this.setWhere();
      let q = that.where;
      let id = that.$route.params.id;
      getProducts(id, q).then(res => {
        that.loading = false;
        this.cantClick = false;
        // that.productList.push.apply(that.productList, res.data.list);
        that.rollList = res.data.banner;
        that.is_host = res.data.is_host;
        // this.$nextTick(() => {
        //   this.hostloop();
        // });
        that.$refs.my_scroller.finishPullToRefresh();
        let d = res.data.list;
        var length = 0;
        if (d.length == length) {
          this.canSCroll = true;
          that.noDate = true;
        } else if (that.where.page == 1) {
          this.productList = [];
          console.log(that.setTitles);
          if (that.setTitles) {
            if (res.data.list.length > 0) {
              this.updateTitle();
              that.pageTitle = res.data.list[0].shop_title;
            } else {
              this.updateTitle();
              that.pageTitle = "听见的橱窗";
            }
            if (that.pageTitle == undefined) {
              that.pageTitle = "听见的橱窗";
            }
            cookie.set("title", escape(that.pageTitle));
          }
          if (that.from1 == "app") {
            if (that.setTitles) {
              that.getTitle();
            }
            var shareUrl = window.location.href;
            if (shareUrl.indexOf("from1=app") != "-1") {
              shareUrl = shareUrl.split("from1=app").join("from1=h5");
            }
            if (shareUrl.indexOf("goods_list") != "-1") {
              shareMsg.shareConfig(
                this.from1,
                "0",
                "0",
                that.pageTitle,
                "听见广播",
                shareUrl,
                "https://seefm.oss-cn-beijing.aliyuncs.com/image/shopShare.png",
                "",
                "1"
              );
            }
          }
          this.canSCroll = true;

          this.productList = res.data.list;
          var shareUrl1 = window.location.href;
          share.share(
            shareUrl1,
            that.pageTitle,
            "听见广播",
            "https://seefm.oss-cn-beijing.aliyuncs.com/image/shopShare.png"
          );
          share.QQshare(
            shareUrl1,
            that.pageTitle,
            "听见广播",
            "https://seefm.oss-cn-beijing.aliyuncs.com/image/shopShare.png"
          );
        } else {
          let videoList1 = res.data.list;
          //临时方案
          if (videoList1[0].id != that.productList[0].id) {
            that.productList = that.productList.concat(videoList1);
          }
        }
        this.countTimeFunction();
      });
    }, 300),
    countTimeFunction() {
      var self = this;
      if (self.countTimetimer != "") {
        clearInterval(self.countTimetimer);
      }
      self.countTimetimer = setInterval(function() {
        self.listLength = 0;
        self.productList.forEach((value, index) => {
          if (value.is_seckill == "1") {
            var timeDom = "";
            var date = new Date();
            var now = parseInt(date.getTime() / 1000);
            var differTime = value.seckill.stop_time - now;
            console.log(differTime);
            // console.log(now);
            var h, m, s;
            if (differTime >= 0) {
              h = Math.floor(differTime / 60 / 60);
              m = Math.floor((differTime / 60) % 60);
              s = Math.floor(differTime % 60);
              h = h < 10 ? "0" + h : h;
              m = m < 10 ? "0" + m : m;
              s = s < 10 ? "0" + s : s;
              timeDom = h + ":" + m + ":" + s;
            } else {
              value.is_seckill = "0";
              timeDom = "";
            }
            self.$set(value.seckill, "countTime", timeDom);
          } else {
            self.listLength++;
          }
        });
        if (self.listLength == self.productList.length) {
          clearInterval(self.countTimetimer);
        }
      }, 1000);
    },
    // submitForm: function() {
    //   this.$set(this, "productList", []);
    //   this.where.page = 1;
    //   this.loadend = false;
    //   this.loading = false;
    //   this.get_product_list();
    // },
    //点击事件处理
    // set_where: function(index) {
    //   let that = this;
    //   switch (index) {
    //     case 0:
    //       return that.$router.push({ path: "/category" });
    //     case 1:
    //       if (that.price === 0) that.price = 1;
    //       else if (that.price === 1) that.price = 2;
    //       else if (that.price === 2) that.price = 0;
    //       that.stock = 0;
    //       break;
    //     case 2:
    //       if (that.stock === 0) that.stock = 1;
    //       else if (that.stock === 1) that.stock = 2;
    //       else if (that.stock === 2) that.stock = 0;
    //       that.price = 0;
    //       break;
    //     case 3:
    //       that.nows = !that.nows;
    //       break;
    //     default:
    //       break;
    //   }
    //   that.$set(that, "productList", []);
    //   that.where.page = 1;
    //   that.loadend = false;
    //   that.get_product_list();
    // },
    //设置where条件
    setWhere: function() {
      // console.log(this.$route.query.id);
      // this.where.id = this.$route.query.id
      // let that = this;
      // if (that.price === 0) {
      //   that.where.priceOrder = "";
      // } else if (that.price === 1) {
      //   that.where.priceOrder = "asc";
      // } else if (that.price === 2) {
      //   that.where.priceOrder = "desc";
      // }
      // if (that.stock === 0) {
      //   that.where.salesOrder = "";
      // } else if (that.stock === 1) {
      //   that.where.salesOrder = "asc";
      // } else if (that.stock === 2) {
      //   that.where.salesOrder = "desc";
      // }
      // that.where.news = that.nows ? "1" : "0";
    },
    switchTap: function() {
      let that = this;
      that.Switch = !that.Switch;
    }
  },
  updated() {
    document.scrollingElement.scrollTop = 0;
  },
  destroyed: function() {
    var shareUrl = window.location.href;
    if (shareUrl.indexOf("from1=app") != "-1") {
      shareMsg.shareConfig(
        "app",
        "0",
        "0",
        "res.data.storeInfo.store_name",
        "res.data.merchant_name",
        "shareUrl",
        "",
        "",
        "0"
      );
    }
    clearInterval(this.timerToTop);
  }
};
</script>
<style scoped lang="scss">
.erjiTab {
  width: 100%;
  background: #f9f9f9;
  height: 1rem;
  .swiper-slide {
    width: auto;
  }
  .oneTabs {
    overflow: hidden;
    font-size: 0.28rem;
    height: 1rem;
    padding: 0 0.06rem;
    p {
      height: 0.28rem;
      line-height: 0;
      color: rgba(0, 0, 0, 0.4);
      padding: 0.5rem 0.24rem 0.2rem 0.24rem;
    }
    .active {
      color: rgba(0, 0, 0, 0.8);
      font-weight: 500;
    }
    span {
      display: block;
      margin: 0 auto;
      width: 0.32rem;
      height: 0.04rem;
      background: rgba(255, 35, 35, 1);
      border-radius: 0.04rem;
    }
  }
}
.toTop {
  position: absolute;
  bottom: 0.1rem;
  right: 0.3rem;
  width: 1.08rem;
  height: 1.08rem;
  z-index: 100;
  img {
    width: 100%;
  }
}
</style>

<style scoped>
.list .item .free_buy {
  width: 1.08rem;
  height: 0.48rem;
  position: absolute;
  right: 0;
  top: 0;
}
.product-bg {
  height: 4.22rem;
  overflow: hidden;
}
.videoBox {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 100%;
}

.videoBox video {
  width: 100%;
  height: 100%;
}
.video-source {
  width: 100%;
  height: 100%;
}
.video_play {
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: 45%;
  top: 45%;
  z-index: 11;
}
.productList2 {
  top: 0;
  bottom: 0;
}
.noCommodity {
  border-top: 3px solid #f5f5f5;
  padding-bottom: 1px;
}
.all {
  position: relative;
  top: 0rem;
  width: 7.5rem;
  overflow: hidden;
}
.all .programList,
.mine {
  width: 100%;
  flex: 1;
  overflow: hidden;
}
div::-webkit-scrollbar {
  display: none;
}
.video {
  box-sizing: border-box;
  width: 7.5rem;
  height: 4rem;
  overflow: hidden;
  margin: auto;
  position: relative;
}
.video .swiper-wrapper {
  border-radius: 0.12rem;
}
.cengs {
  width: 100%;
  height: 4rem;
  background-size: 100%;
}
.video .swiper-wrapper .id_test_video {
  width: 100%;
}
.title {
  display: flex;
  padding: 0.32rem 0;
  justify-content: center;
  height: 0.34rem;
  align-items: center;
}
.title span {
  color: rgba(252, 64, 74, 1);
  font-size: 0.28rem;
  padding: 0.02rem 0.32rem;
  line-height: 1;
  font-weight: bold;
}
.title img {
  width: 0.46rem;
  height: 0.06rem;
}
.noCart {
  margin-top: 0.17rem;
  padding-top: 0.1rem;
}

.noCart .pictrue {
  width: 4rem;
  height: 3rem;
  margin: 46% auto 0.5rem auto;
}

.noCart .pictrue img {
  width: 100%;
  height: 100%;
}
.noCart .txt {
  font-size: 0.24rem;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  letter-spacing: 0.01rem;
}
.cantClick {
  pointer-events: none;
}
</style>
